<template>
    <d2-container>
        <template slot="header">
            <el-form :inline="true" :model="searchForm" ref="searchForm" size="small" v-if="showHeader" class="searchHeader">

                <el-form-item label="集团状态" prop="enablestate">
                    <ec-dict-select v-model="searchForm.enablestate" placeholder="请选择启用状态" dictType="enable_state">
                    </ec-dict-select>
                </el-form-item>

                <el-form-item label="集团名称" prop="name">
                    <el-input v-model="searchForm.name" placeholder="请输入集团名称" clearable />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="getDataTable">
                        <d2-icon name="search" />
                        查询
                    </el-button>
                    <el-button @click="handleFormReset">
                        <d2-icon name="refresh" />
                        重置
                    </el-button>
                </el-form-item>

            </el-form>
        </template>

        <div class="table-header">
            <div>
                <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="addOrUpdate()">添加集团
                </el-button>
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
                <!-- <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button> -->
            </div>
            <div>
                <ec-prompt-button content="刷新" icon="el-icon-refresh" @click="getDataTable()"></ec-prompt-button>
                <ec-prompt-button content="搜索" icon="el-icon-search" @click="changeHeader()"></ec-prompt-button>
                <ec-prompt-button content="导入" icon="el-icon-download"></ec-prompt-button>
                <ec-prompt-button content="导出" icon="el-icon-upload2" @click="dataExport()"></ec-prompt-button>
                <ec-prompt-button content="分享" icon="el-icon-share"></ec-prompt-button>
            </div>
        </div>

        <!-- 表格 -->
        <ec-table :data="tabledata" v-loading="loading">
            <el-table-column prop="name" header-align="center" align="center" label="名称" width="300">
                <template slot-scope="scope">
                    <el-link type="primary" @click="addOrUpdate(scope.row.pkGroup)">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="shortname" header-align="center" align="center" label="简称" show-overflow-tooltip width="200">
            </el-table-column>
            <el-table-column prop="tel" header-align="center" align="center" label="电话">
            </el-table-column>
            <el-table-column prop="introduction" header-align="center" align="center" label="简介" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="headaddress" header-align="center" align="center" label="总部地址">
            </el-table-column>
            <el-table-column prop="fax" header-align="center" align="center" label="传真">
            </el-table-column>
            <el-table-column prop="enableStateDesc" header-align="center" align="center" label="启用状态">
            </el-table-column>
            <el-table-column prop="countryareaDesc" header-align="center" align="center" label="行政区划">
            </el-table-column>
            <el-table-column prop="countryzoneDesc" header-align="center" align="center" label="国家地区">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="addOrUpdate(scope.row.pkGroup)"><i
                            class="el-icon-edit"></i>编辑</el-button>
                    <el-button type="text" size="small" @click="deleteDict(scope.row.pkGroup)"><i
                            class="el-icon-delete"></i>删除
                    </el-button>
                </template>
            </el-table-column>
        </ec-table>
        <template slot="footer">
            <ec-pagination :page="page" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </ec-pagination>
        </template>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataTable"></add-or-update>
    </d2-container>
</template>

<script>
    import * as groupService from '@/api/upms/group'
    import AddOrUpdate from './add-or-update'
    export default {
        name: "upms-group-index",
        data() {
            return {
                searchForm: {
                    enablestate: '',
                    name: '',
                },
                page: {
                    page: 1,
                    limit: 10,
                    total: 0
                },
                showHeader: true,
                addOrUpdateVisible: false,
                tabledata: [],
                loading: false,
            }
        },
        components: {
            AddOrUpdate
        },
        computed: {},
        mounted() {
            this.getDataTable();
        },
        methods: {
            getDataTable() {
                this.loading = true;
                let query = {
                    page: this.page.page,
                    limit: this.page.limit,
                    enablestate: this.searchForm.enablestate,
                    name: this.searchForm.name
                };
                groupService.getgrouppage(query).then(data => {
                    this.tabledata = data.list;
                    this.page.total = data.totalCount;
                    this.loading = false;
                }).catch((res) => {
                    this.loading = false;
                });
            },
            showDictDetails(id) {
                this.dictDetailsVisible = true;
                this.$nextTick(() => {
                    this.$refs.dictDetail.init(id)
                })
            },
            addOrUpdate(id) {
                this.addOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id)
                })
            },
            deleteDict(id) {
                if (id) {
                    this.$confirm("确认删除？", "确认信息", {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "删除",
                        cancelButtonText: "取消"
                    }).then(() => {
                        groupService.delgroup(id).then(() => {
                            this.getDataTable();
                        });
                    });
                }

            },
            changeHeader() {
                this.showHeader = !this.showHeader
            },
            handleFormReset() {
                this.$refs.searchForm.resetFields()
            },
            //分页查询
            handleSizeChange(val) {
                this.page.limit = val;
                this.getDataTable();
            },
            handleCurrentChange(val) {
                this.page.page = val;
                this.getDataTable();
            },
            dataExport() {
                let query = {
                    enablestate: this.searchForm.enablestate,
                    name: this.searchForm.name
                };
                groupService.groupExport(query).then(data => {
                    this.$message.success(data)
                })
            },
        }
    }
</script>